---
title: Frontend Tools
icon: "lucide/Wrench"
description: Create frontend tools and use them within your LangGraph agent.
---
import InstallSDKSnippet from "@/snippets/install-sdk.mdx"
import { IframeSwitcher } from "@/components/content"
import RunAndConnect from "@/snippets/integrations/langgraph/run-and-connect.mdx"
import { Tabs, Tab } from "fumadocs-ui/components/tabs"

<IframeSwitcher
  id="frontend-tools-example"
  exampleUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?sidebar=false&chatDefaultOpen=false"
  codeUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs"
  exampleLabel="Demo"
  codeLabel="Code"
  height="700px"
/>

## What is this?
Frontend tools enable you to define client-side functions that your LangGraph agent can invoke, with execution happening entirely in the user's browser. When your agent calls a frontend tool,
the logic runs on the client side, giving you direct access to the frontend environment.

This can be utilized for to let [your agent control the UI](/langgraph/frontend-actions), [generative UI](/langgraph/generative-ui/frontend-tools), or for Human-in-the-loop interactions.

In this guide, we cover the use of frontend tools for generative UI.

## When should I use this?
Use frontend tools when you need your agent to interact with client-side primitives such as:
- Reading or modifying React component state
- Accessing browser APIs like localStorage, sessionStorage, or cookies
- Triggering UI updates or animations
- Interacting with third-party frontend libraries
- Performing actions that require the user's immediate browser context

## Implementation

<Steps>
    <Step>
      ### Run and connect your agent
      <RunAndConnect components={props.components}  />
    </Step>

    <Step>
        ### Create a frontend tool

        First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started
        that says hello to the user.

        ```tsx title="page.tsx"
        import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight]

        export function Page() {
          // ...

          // [!code highlight:25]
          useFrontendTool({
            name: "sayHello",
            description: "Say hello to the user",
            parameters: [
              {
                name: "name",
                type: "string",
                description: "The name of the user to say hello to",
                required: true,
              },
            ],
            handler({ name }) {
              // Handler returns the result of the tool call
              return { currentURLPath: window.location.href, userName: name };
            },
            render: ({ args }) => {
              // Renders UI based on the data of the tool call
              return (
                <div>
                  <h1>Hello, {args.name}!</h1>
                  <h1>You're currently on {window.location.href}</h1>
                </div>
              );
            },
          });

          // ...
        }
        ```
    </Step>
    <Step>
        ### Install the CopilotKit SDK
        
        Now, we'll need to modify the agent to access these frontend tools. In your terminal, navigate to your agent's folder and continue from there!

        <InstallSDKSnippet components={props.components}/>
    </Step>
    <Step>
        ### Inheriting from CopilotKitState

        To access the frontend tools provided by CopilotKit, you can inherit from CopilotKitState in your agent's state definition:

        <Tabs groupId="language_langgraph_agent" items={['Python', 'TypeScript']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                from copilotkit import CopilotKitState # [!code highlight]

                class YourAgentState(CopilotKitState): # [!code highlight]
                    your_additional_properties: str
                ```
            </Tab>
            <Tab value="TypeScript">
                ```typescript title="agent-js/src/agent.ts"
                import { Annotation } from "@langchain/langgraph";
                import { CopilotKitStateAnnotation } from "@copilotkit/sdk-js/langgraph"; // [!code highlight]

                export const YourAgentStateAnnotation = Annotation.Root({
                    yourAdditionalProperty: Annotation<string>,
                    ...CopilotKitStateAnnotation.spec, // [!code highlight]
                });
                export type YourAgentState = typeof YourAgentStateAnnotation.State;
                ```
            </Tab>
        </Tabs>

        By doing this, your agent's state will include the `copilotkit` property, which contains the frontend tools that can be accessed and invoked.
    </Step>
    <Step>
        ### Accessing Frontend Tools

        Once your agent's state includes the `copilotkit` property, you can access the frontend tools and utilize them within your agent's logic.

        Here's how you can call a frontend tool from your agent:

        <Tabs groupId="language_langgraph_agent" items={['Python', 'TypeScript']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                async def agent_node(state: YourAgentState, config: RunnableConfig):
                    # Access the tools from the copilotkit property

                    tools = state.get("copilotkit", {}).get("actions", []) # [!code highlight]
                    model = ChatOpenAI(model="gpt-4o").bind_tools(tools)

                    # ...
                ```
            </Tab>
            <Tab value="TypeScript">
                ```typescript title="agent-js/src/agent.ts"
                async function agentNode(state: YourAgentState, config: RunnableConfig): Promise<YourAgentState> {
                    // Access the tools from the copilotkit property

                    const tools = state.copilotkit?.actions; // [!code highlight]
                    const model = ChatOpenAI({ model: 'gpt-4o' }).bindTools(tools);

                    // ...
                }
                ```
            </Tab>
        </Tabs>

        These tools are automatically populated by CopilotKit and are compatible with LangChain's tool call definitions, making it straightforward to integrate them into your agent's workflow.
    </Step>
    <Step>
        ### Give it a try!
        You've now given your agent the ability to directly call any frontend tools you've defined. These tools will be available to the agent where they can be used as needed.
    </Step>
</Steps>
